<%--
  Created by IntelliJ IDEA.
  User: zl
  Date: 2018/12/30
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="static/lib/layui/css/layui.css">
    <script type="text/javascript" src="static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="static/js/Constants.js"></script>
    <script type="text/javascript" src="static/js/boUtil.js"></script>
    <style>
        .layui-col-xs6 {
            width: 45%;
        }

        .radio {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 245px;
            font-weight: 400;
            line-height: 20px;
        }

    </style>
</head>
<body>
<div style="padding: 0px 100px;"></div>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">优惠券</li>
        <li>体验券</li>
        <li>次卡</li>
    </ul>
    <div class="layui-tab-content">
        <div id="coupon_view" class="layui-tab-item layui-show" style="margin-left: 25px;margin-top: 10px;"></div>
        <div id="ec_coupon_view" class="layui-tab-item" style="margin-left: 25px;margin-top: 10px;"></div>
        <div id="time_card_view" class="layui-tab-item" style="margin-left: 25px;margin-top: 10px;"></div>
    </div>
    <div class="layui-form-item" style="float: right;margin-right: 38px;margin-top: 16px;">
        <div class="layui-input-block">
            <%-- <button id="cancelChoosedRadio" type="reset" class="layui-btn layui-btn-primary">取消</button>--%>
            <button id="getChoosedRadio" class="layui-btn">确认</button>
        </div>
    </div>

    <%--优惠券展示脚本内容--%>
    <script id="coupon_script" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-col-xs4" style="margin-top: 5px">
            <label class="radio">
                <input type="radio" name="coupon" value="{{index}}">
                ￥{{item.couponValue}} ({{item.couponCondition}} 满{{item.minAmount}}可用)
            </label>
        </div>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </script>

    <%--体验券展示脚本内容--%>
    <script id="ec_coupon_script" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-col-xs4" style="margin-top: 5px">
            <label class="radio">
                <input type="radio" name="coupon" value="{{index}}">
                {{item.cardName}}
            </label>
        </div>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </script>

    <%--次卡展示脚本内容--%>
    <script id="time_card_script" type="text/html">
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-col-xs4" style="margin-top: 5px">
            <label class="radio">
                <input type="radio" name="coupon" value="{{index}}">
                {{item.cardName}}（ {{item.totalTimes}} 次）
            </label>
        </div>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </script>


</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //step.1 变量定义
    //const host = "http://merchantnew.s1.natapp.cc";
    const shopId = GetQueryString("shopId");

    //step.2 异步获取数据
    layui.use(['form', 'element', 'laytpl'], function () {
        var $ = layui.jquery
            , form = layui.form
            , element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块
            , laytpl = layui.laytpl;
        var couponList = new Array();
        var ecCouponList = new Array();
        var timeCardList = new Array();

        //第三步：渲染模版
        /**step.1 优惠券列表获取**/
        var couponUrl = host + "/thtml/coupon/givingCouponListByPC.thtml?shopId=" + shopId;
        getTemplate(couponUrl, coupon_script, 'coupon_view');
        //体验券
        var ecCouponUrl = host + "/thtml/mif/getMifServerGet/membershipCardEc/queryCardEcListByPC.thtml?shopId=" + shopId;
        getTemplate(ecCouponUrl, ec_coupon_script, 'ec_coupon_view');
        // 次卡
        var carUrl = host + "/thtml/mif/getMifServerGet/membershipTimecard/queryListByShopId.thtml?shopId=" + shopId + "&status=ACTIVED&type=1";
        getTemplate(carUrl, time_card_script, 'time_card_view');


        /**
         * 组装html的模板内容
         * @param url
         * @param script
         * @param viewId
         */
        function getTemplate(url, script, viewId) {
            fetchHttp(url).then(res => {
                if (res.code === "0000") {
                    var data = { //数据
                        "title": "Layui常用模块"
                        , "list": res.data
                    }
                    if (script == coupon_script) {
                        couponList = res.data;
                    } else if (script == ec_coupon_script) {
                        ecCouponList = res.data;
                    } else if (script == time_card_script) {
                        timeCardList = res.data;
                    }
                    var getTpl = script.innerHTML
                        , view = document.getElementById(viewId);
                    laytpl(getTpl).render(data, function (html) {
                        view.innerHTML = html;
                    });
                }
            }).catch(e => {
                console.log(e)
            });
        }

        // 获取单选按钮的
        // 通过type="radio"获取选中的值
        $("#getChoosedRadio").click(function () {
            var index = $("input[type=radio]:checked").val();
            var choosedContent = "";
            var giveType = "";
            var giveTypeValue = "";
            if ($("#coupon_view").hasClass("layui-show")) {
                // console.log("cv");
                giveType = "COUPON";
                giveTypeValue = couponList[index].couponId;
                choosedContent = "￥" + couponList[index].couponValue + "(" + couponList[index].couponCondition + couponList[index].minAmount + ")";
            } else if ($("#ec_coupon_view").hasClass("layui-show")) {
                // console.log("ecv");
                giveType = "EC_COUPON";
                giveTypeValue = ecCouponList[index].membershipCardId;
                choosedContent = ecCouponList[index].cardName;
            } else if ($("#time_card_view").hasClass("layui-show")) {
                // console.log("tcv");
                giveType = "TIME_CARD";
                giveTypeValue = timeCardList[index].membershipCardId;
                choosedContent = timeCardList[index].cardName + "(" + timeCardList[index].totalTimes + " 次)";
            }
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            //为上一层页面赋值
            parent.$("#choosedContent").text(choosedContent);
            parent.$("#giveType").val(giveType);
            parent.$("#giveTypeValue").val(giveTypeValue);
        });

    });
</script>
</body>
</html>
